<template>
  <div class="wrapper">
    <h1>注册新用户</h1>
    <form class="form">
      <input type="text" placeholder="用户名" v-model="userInfo.userName"/>
      <input type="text" placeholder="身份证号"
      :focused="showIdKeyboard"
        readonly
        @click="showIdKeyboard = true"
        v-model="userInfo.userIDCard"
       />
      <input type="text" placeholder="手机号"
      :focused="showTelKeyboard"
        readonly
        @click="showTelKeyboard = true"
        v-model="userInfo.userPhone" />
      <input
        type="password"
        placeholder="密码"
        v-model="userInfo.userPwd"
      />
      <div class="btns">
        <button @click="registerUser">注册</button>
        <button @click="toLogin">已有账号</button>
      </div>
    </form>
    <div class="right">@copyright by 恰饭啦</div>
    <!-- 手机号键盘 -->
    <van-number-keyboard
      :show="showTelKeyboard"
      @blur="showTelKeyboard = false"
      @input="onInputTel"
      @delete="onDeleteTel"
    />
    <!-- 身份证键盘 -->
    <van-number-keyboard
  :show="showIdKeyboard"
  extra-key="X"
  close-button-text="完成"
  @blur="showIdKeyboard = false"
  @input="onInputUserId"
  @delete="onDeleteId"
/>
  </div>
</template>
<script>
import { Toast } from "vant"
export default {
  data() {
    return {
      //内置键盘
      showPwdKeyboard: false,
      showTelKeyboard: false,
      showIdKeyboard: false,
      // 表单数据
      userInfo: {
        userPwd: '',
        userName: '',
        userIDCard: '',
        userPhone: ''
      }
    };
  },
  methods: {
    // 点击已有账号按钮
    toLogin() {
      this.$router.push("/");
    },
    //点击注册按钮
    async registerUser() {
      // 判断表格是否填写完整
    const flag = Object.keys(this.userInfo).some((key) => {
     if(!this.userInfo[key]) return true
    });
    if(flag) return Toast.fail('请先填写完整注册信息');
    // 验证身份证
    let validID = /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/
    if(!validID.test(this.userInfo.userIDCard)) return Toast.fail('请填写正确的身份证码');
    // 验证手机号
    let validTel = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
    if(!validTel.test(this.userInfo.userPhone)) return Toast.fail('请填写正确的手机号码');
    // 验证密码
    if(this.userInfo.userPwd.length < 6) return Toast.fail('密码至少需要6位');
    //发送请求
    const { data: res } = await this.$http.post('register', this.userInfo)
    if(!res.data) return Toast.fail(res.message);
    if(res.message === '注册成功') {
      this.$router.push('/login')
    }
    },
    //输入手机号
    onInputTel(key) {
      this.userInfo.userPhone += key;
    },
    onDeleteTel(key) {
      this.userInfo.userPhone = this.userInfo.userPhone.slice(0, this.userInfo.userPhone.length - 1);
    },
    // 输入身份证Id
    onInputUserId(key) {
      this.userInfo.userIDCard += key;
    },
    onDeleteId(key) {
      this.userInfo.userIDCard = this.userInfo.userIDCard.slice(0, this.userInfo.userIDCard.length - 1);
    },
  }
};
</script>
<style lang="less" scoped>
@import "../assets/css/register.less";
</style>
